<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:tiles="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org" lang="en">

<head>

</head>

<body tiles:fragment="content">
<script th:inline="javascript">
//<![CDATA[
	
	var aux = /*[[${faseSeleccionada.ordenFase}]]*/ ordenFase;
  	var detalle = false;
  
$(document).ready(function(){
	$( "#tabs" ).tabs({active: aux});
    $('#botonDetalle').click(function() {
    	if(detalle){
    		$('#mayorDetalle').fadeOut('fast');
    		detalle = false;
    		$('#botonDetalle').html('Ampliar detalle de solicitud');
    	}else{    		
    		$('#mayorDetalle').fadeIn('fast');
    		detalle = true;
    		$('#botonDetalle').html('Menor detalle');
        }
    });
});
//]]>
</script>

		<h5>
			<a href='/consultarAtencion' th:href="@{/consultarAtencion}"
			 th:text="#{ejecutarAtencion.consultarAtencion}">Consulta de fases activas</a>
			>
			<span th:text="#{ejecutarAtencion.detalleTrabajo}">Detalle de trabajo</span>
		</h5>
		<hr />
		
		<div class="success" th:if="${puntajeObtenido}">
			<img th:src="@{/resources/static/images/fichas.gif}" alt="fichas"/>
            <span th:text="#{puntaje.puntajeObtenido(${puntajeObtenido})}">¡Buen trabajo, se han sumado X puntos a su cuenta!</span>            
        </div>
        <div th:if="${logrosObtenidos}">
	        <div th:each="logro : ${logrosObtenidos}" class="success" >
		        <div th:switch="${logro.medalla.categoria}">
				  <img th:case="'bronce'" th:src="@{/resources/static/images/medallaBronce.gif}" alt="bronce" width="50%" height="50%"/>
				  <img th:case="'plata'" th:src="@{/resources/static/images/medallaPlata.gif}" alt="plata" width="50%" height="50%"/>
				  <img th:case="'oro'" th:src="@{/resources/static/images/medallaOro.gif}" alt="oro" width="50%" height="50%"/>
				</div>
	            <span th:text="#{puntaje.medallaObtenida(${logro.medalla.nombre})}">¡Felicitaciones, ha obtenido el logro X!</span>            
	        </div>
        </div>        
		<div class="error" th:if="${flagActividadesAbiertas}">
          <span th:text="#{ejecutarAtencion.errorActividadesAbiertas}">Error</span><br />
        </div>
        <div class="error" th:if="${flagSinActividades}">
          <span th:text="#{ejecutarAtencion.errorSinActividades}">Error</span><br />
        </div>
		<div class="success" th:if="${confirmaActualizacion}">
          <span th:text="#{ejecutarAtencion.actividadActualizada}">Actividad actualizada con éxito</span><br />
        </div>
        <div class="success" th:if="${confirmaCierreFase}">
          <span th:text="#{ejecutarAtencion.faseCerrada}">Fase cerrada con éxito</span><br />
        </div>
        
	<fieldset>
		<legend th:text="#{ejecutarAtencion.informacionSolicitud}">Información de Solicitud</legend>
		<div class="span-5">
			<label th:text="#{ejecutarAtencion.numero}">Número de Solicitud </label><br/>				
			<input type="text" th:value="${solicitud.id}" disabled="disabled"/>
		</div>
		<div class="span-5">
			<label th:text="#{ejecutarAtencion.cliente}">Cliente </label><br/>					
			<input type="text" th:value="${solicitud.solicitante.cliente.razonSocial}" disabled="disabled"/>
		</div>
		<div class="span-5 last">
			<label th:text="#{ejecutarAtencion.solicitante}">Solicitante </label><br/>					
			<input type="text" th:value="${solicitud.solicitante.nombre}" disabled="disabled"/>
		</div>		
		<div class="span-18 last" id="mayorDetalle" style="display: none;">
			<div class="span-5">
				<label th:text="#{ejecutarAtencion.AreaSolicitante}">Área solicitante </label><br/>				
				<input type="text" th:value="${solicitud.areaSolicitante.nombre}" disabled="disabled"/>
			</div>
			<div class="span-5">
				<label th:text="#{ejecutarAtencion.tipoRequerimiento}">Tipo de Requerimiento </label><br/>					
				<input type="text" th:value="${solicitud.tipoRequerimiento.nombre}" disabled="disabled"/>
			</div>
			<div class="span-5 last">
				<label th:text="#{ejecutarAtencion.fechaEsperada}">Fecha esperada </label><br/>					
				<input type="text" th:value="${#dates.format(solicitud.fechaEsperada, #messages.msg('date.format'))}" disabled="disabled"/>
			</div>
		
			<div class="span-16 last">
				<p>
					<span th:text="#{registrarSolicitud.desc1}">Desc1 </span><br/>
					<textarea class="span-16" th:text="${solicitud.desc1}" disabled="disabled"/><br/>
				</p>
					<p>
				<span th:text="#{registrarSolicitud.desc2}">Desc2 </span><br/>
					<textarea class="span-16" th:text="${solicitud.desc2}" disabled="disabled"/><br/>
				</p>
				<p>
					<span th:text="#{registrarSolicitud.desc3}">Desc3 </span><br/>
					<textarea class="span-16" th:text="${solicitud.desc3}" disabled="disabled"/><br/>
				</p>
				<p>
					<span th:text="#{registrarSolicitud.desc4}">Desc4 </span><br/>
					<textarea class="span-16" th:text="${solicitud.desc4}" disabled="disabled"/><br/>
				</p>
				<p>
					<span th:text="#{registrarSolicitud.desc5}">Desc5 </span><br/>
					<textarea class="span-16" th:text="${solicitud.desc5}" disabled="disabled"/><br/> 
			    </p>
		    </div>
		    <div th:if="${solicitud.archivo}" class="span-5 last">
		   	    <label th:text="#{ejecutarAtencion.ArchivoAdjunto}">Archivo adjunto </label>					
				<span th:text="${solicitud.archivo.nombre}"></span>
				<a class="button" href="#" th:href="@{'abrirArchivo/' + ${solicitud.archivo.id} + '/' + ${solicitud.archivo.nombre}}">Abrir</a>
			</div>	
		</div>
		<div class="span-5 last">
			<button id="botonDetalle" th:value="#{ejecutarAtencion.botonDetalleSolicitud}">Ampliar detalle de solicitud</button>
		</div>
	</fieldset>
	<fieldset>
	<legend th:text="#{ejecutarAtencion.fasesAsignada} + ' ' + ${faseSeleccionada.nombre}">Fases asignada:</legend>
		<div class="span-17" id="tabs">
			  <ul>
			    <li th:each="fase : ${solicitud.fases}">
			 	   <a href="#tabs-1" th:href="'#'+ ${fase.id}" th:text="${fase.nombre}">Fase X</a>
			    </li>				      
			  </ul>
			  <div th:each="fase : ${solicitud.fases}">	
				 <div th:id="${fase.id}" class="container">						
					<div class= "span-16">					
					<h3><p th:text="#{ejecutarAtencion.listaActividades}">Lista de actividades</p></h3>					
						<table class="summary" >
					        <thead>
					            <tr>
					                <th th:text="#{resultado.nombre}">Nombre</th>
					                <th th:text="#{resultado.fechaInicio}">Fecha de inicio</th>
					                <th th:text="#{resultado.fechaFin}">Fecha de fin</th>
					                <th th:text="#{resultado.estado}">Estado</th>
					                <th th:text="#{resultado.responsable}">Persona responsable</th>
					                <th th:text="#{resultado.accion}">Acción</th>					                
					            </tr>
					        </thead>
					        <tbody>
					            <tr th:each="actividad : ${fase.actividades}">
					                <td th:text="${actividad.nombre}">Act1</td>
					                <td th:text="${#dates.format(actividad.fechaInicio, #messages.msg('date.formatFull'))}">Fecha inicio</td>
					                <td th:if="${actividad.fechaFin}" th:text="${#dates.format(actividad.fechaFin, #messages.msg('date.formatFull'))}">Fecha fin</td>
					                <td th:unless="${actividad.fechaFin}"> </td>
					                <td th:text="${actividad.estado}">Estado</td>	
					                <td th:text="${actividad.operador.nombre}">Nombre operador</td>					                       
 									<td th:unless="${actividad.fechaFin == null and faseSeleccionada.id == fase.id}"><a class="button" href="#" th:href="@{'/verActividad/' + ${faseSeleccionada.id} + '/' + ${actividad.id}}">Ver actividad</a></td>						                
					       	        <td th:if="${actividad.fechaFin == null and faseSeleccionada.id == fase.id}"><a class="button positive" href="#" th:href="@{'/editarActividad/' + ${faseSeleccionada.id} + '/' + ${actividad.id}}">Editar actividad</a></td>						    
					            </tr>
					            <tr th:if="${fase.actividades.isEmpty()}">
					                <td colspan="6" th:text="#{resultado.noResultados}">No se encontraron resultados</td>
					            </tr>
					        </tbody>
					    </table>					    
					</div>
					<div th:if="${fase.fechaFin == null and faseSeleccionada.id == fase.id}" class= "span-17">
					<form th:id="${'adicionarForm' + fase.id}" name="adicionarActividad" action="#" th:object="${actividad}" th:action="@{/adicionarActividad}" method="post">
					<input type="hidden"  name="idFase" th:value="${fase.id}"/>
 						<input type="hidden" th:field="*{nombre}" th:id="${'nombreAct' + fase.id}"/> 
						<script th:inline="javascript">
							//<![CDATA[
							  $(function() {
							    $( /*[[${'#adicionar'+ fase.id}]]*/ "#adicionar" 
							    		).dialog({
							      autoOpen: false,
							      resizable: false,
							      height:180,
							      width: 250,
							      draggable: false,
							      modal: true,
							      buttons: {
							        "Adicionar": function() {
							        	document.adicionarActividad.submit();			
							        },
							        "Cancelar": function() {
							          $( this ).dialog( "close" );
							        }
							      }
							    });
							    $( /*[[${'#openerAdicionar'+ fase.id}]]*/ "#openerAdicionar"
							    		).click(function() {
							        $( /*[[${'#adicionar'+ fase.id}]]*/"#adicionar"
							        		).dialog( "open" );
							      });
							  });
							  
							  function updateInput(ish){
								    document.getElementById( /*[[${'nombreAct'+ fase.id}]]*/ "nombreAct"
								    		).value = ish;
								}
							//]]>
						</script>
						<div th:id="${'adicionar' + fase.id}" th:title="#{ejecutarAtencion.adicionarTitulo}">
							<label th:text="#{ejecutarAtencion.nombreActividad}">Nombre de actividad: </label><br/>
							<input type="text" onchange="updateInput(this.value)"/>
						</div>						
													
		 				<button type="button" class="button positive" th:id="${'openerAdicionar' + fase.id}" th:value="#{ejecutarAtencion.botonAdicionar}">Adicionar actividad</button>
		 				</form>
		 				<form th:id="${'cerrarFaseForm' + fase.id}" name="cerrarFase" action="#" th:action="@{/cerrarFase}" method="post">
			 				<input type="hidden" th:value="${fase.id}" name="idFase"/>
			 				<script th:inline="javascript">			 				 
							//<![CDATA[
							  $(function() {
							    $( /*[[${'#cerrarFase'+ fase.id}]]*/ "#cerrarFase" 
							    		).dialog({
							      autoOpen: false,
							      resizable: false,
							      height:220,
							      width: 350,
							      draggable: false,
							      modal: true,
							      buttons: {
							        "Cerrar Fase": function() {
							        	document.cerrarFase.submit();			
							        },
							        "Cancelar": function() {
							          $( this ).dialog( "close" );
							        }
							      }
							    });
							    $( /*[[${'#openerCerrarFase'+ fase.id}]]*/ "#openerCerrarFase"
							    		).click(function() {
							        $( /*[[${'#cerrarFase'+ fase.id}]]*/"#cerrarFase"
							        		).dialog( "open" );
							      });
							  });
							//]]>
							</script>
						    <div th:id="${'cerrarFase' + fase.id}" th:title="#{ejecutarAtencion.cerrarFaseTitulo}">
								<p th:text="#{ejecutarAtencion.cerrarFase}" >¿Desea cerrar la fase?</p>
								<img th:src="@{/resources/static/images/miniWarning.gif}" alt="warning"/>
								<span class="alt" th:text="#{ejecutarAtencion.cerrarFaseWarning}">La fase finalizará y no podrá añadir futuras actividades</span>
						    </div>
							<button type="button" class="button positive" th:id="${'openerCerrarFase' + fase.id}" th:value="#{ejecutarAtencion.botonCerrarFase}" th:unless="${modoConsulta}">Finalizar atenci&oacute;n</button>
			 			</form>
		 				<a class="button" href='/consultarAtencion' th:href="@{/consultarAtencion}" th:text="#{general.volver}">Volver</a> 				
		 			
		 			</div>
		 			<div th:unless="${fase.fechaFin == null and faseSeleccionada.id == fase.id}" class= "span-17">
		 				<a class="button" href='/consultarAtencion' th:href="@{/consultarAtencion}" th:text="#{general.volver}">Volver</a>
		 			</div>									
				  </div>
			  </div>		
			</div>				
	</fieldset>
</body>

</html>
